<template>
  <div class="home-index-content">
    <Row>
      <Col span="6">
        <Todo />
      </Col>
      <Col span="18">
        <Row class="com-show-input-border ivu-mb-16" justify="end">
          <Col span="8" style="margin-right: -12px;">
            <OrganizationalTree placeholder="上级组织" @input="onChange" />
          </Col>
        </Row>
        <BusinessInfo ref="BusinessInfo" class="home-index-item" />
      </Col>
      <Col span="6" class-name="home-index-item">
        <BusinessInfoTrackDown ref="BusinessInfoTrackDown" />
      </Col>
      <Col span="18" class-name="home-index-item">
        <EnterpriseSharing ref="EnterpriseSharing" />
      </Col>
    </Row>
  </div>
</template>

<script type="text/javascript">
import Todo from "./todo.vue";
import BusinessInfo from './businessInfo.vue'
import BusinessInfoTrackDown from './businessInfoTrackDown.vue'
import EnterpriseSharing from "./enterpriseSharing.vue"
import OrganizationalTree from '@/pages/components/organizationalTree'

export default {
  name: "home-page",
  components: {
    Todo,
    BusinessInfo,
    BusinessInfoTrackDown,
    EnterpriseSharing,
    OrganizationalTree
  },
  data () {
    return {
      refList: ['BusinessInfo', 'BusinessInfoTrackDown', 'EnterpriseSharing']
    };
  },
  methods: {
    onChange (orgId) {
      this.refList.forEach(it => {
        this.$refs[it].setOrgId(orgId)
      })
    }
  },
};
</script>

<style lang="less" scoped>
.badge {
  width: 42px;
  height: 42px;
  background: #eee;
  border-radius: 6px;
  display: inline-block;
}
.todo-item {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  line-height: 42px;
  .todo-item-left {
    height: 42px;
    display: flex;
    .todo-item-centent {
      margin-left: 15px;
      font-size: 16px;
      font-weight: bold;
    }
  }
  .todo-item-right {
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    padding: 0 15px;
    border-radius: 20px;
    background: #333;
    color: #fff;
    font-size: 16px;
  }
}
.home-index-item {
  margin-top: 5px;
}
</style>
